<template>
  <div class="chart-container app-container nohead">
      <div class="conDiv">
        <el-row class="JNPF-common-search-box" :gutter="16">
          <el-form @submit.native.prevent>
            <el-col :span="12">
                <el-form-item label="年度">
                    <el-date-picker type="year" v-model="query.times" value-format="yyyy"></el-date-picker>
                </el-form-item>
            </el-col>
          </el-form>
          <el-button type="primary" icon="el-icon-search" @click="searchAll()">查询</el-button>
			    <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
			  </el-row>
          <div id="chart" style="height:530px;margin-top:30px;"></div>
      </div>
      <div class="conDiv">
        <el-row class="JNPF-common-search-box" :gutter="16">
          <!-- <el-form @submit.native.prevent>
            <el-col :span="6">
                <el-form-item label="年度">
                    <el-date-picker type="year" v-model="query1.times" value-format="yyyy"></el-date-picker>
                </el-form-item>
            </el-col>
          </el-form> -->
          <!-- <el-button type="primary" icon="el-icon-search" @click="search1()">查询</el-button>
          <el-button icon="el-icon-refresh-right" @click="reset1()">重置</el-button> -->
			  </el-row>
        <div id="chart1" style="height:530px;margin-top:92px;"></div>
      </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import echarts from 'echarts'
import resize from '../../extend/graphDemo/mixins/resize'
export default {
  // name: 'extend-graphDemo-echartsBar',
  name: 'extend-graphDemo-highchartsLine',
  mixins: [resize],
  data() {
    return {
      chart: null,
      chart1: null,
      option:{},
      option1:{},
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
      query: {
        times:undefined
      }
    }
  },
  mounted() {
    this.searchAll();
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    if (!this.chart1) {
      return
    }
    this.chart1.dispose()
    this.chart1 = null
  },
  methods: {
    searchAll(){
      this.search();  //事故类别
      this.search1();  //事故等级
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('chart'))
      this.chart.setOption(this.option)
      this.chart1 = echarts.init(document.getElementById('chart1'))
      this.chart1.setOption(this.option1)
    },
    search() {
      let query = {
        ...this.listQuery,
        ...this.query
      };
      request({
        url: `/api/System/qyaqscSgbgxx/Actions/lbsl`,
            method: 'get',
            data: query
        }).then(res => {
            let datas = res.data;
            let sg0 = 0;
            let sg1 = 0;
            let sg2 = 0;
            let sg3 = 0;
            let sg4 = 0;
            if(datas.length > 0){
                for(let i=0;i<datas.length;i++){
                    if(datas[i].shlb == '0'){
                      sg0 = datas[i].sgdjnum;
                    }else if(datas[i].shlb == '1'){
                      sg1 = datas[i].sgdjnum;
                    }else if(datas[i].shlb == '2'){
                      sg2 = datas[i].sgdjnum;
                    }else if(datas[i].shlb == '3'){
                      sg3 = datas[i].sgdjnum;
                    }else if(datas[i].shlb == '4'){
                      sg4 = datas[i].sgdjnum;
                    }
                }
            }
            let ydatas = [sg0,sg1,sg2,sg3,sg4];
            let that = this;
            let series = [{
                        name: '事故发生数量',
                        // type: 'line',
                        type: 'bar',
                        data: ydatas,
                        // itemStyle: {
                        //   normal: {
                        //     label: {
                        //       show: true,  //开启显示
                        //       position: 'top',  //在上方显示
                        //       textStyle: {  //数值样式
                        //         color: '#D53A35',
                        //         fontSize: 16
                        //       }
                        //     }
                        //   }
                        // },
                      }]
            
            that.option = {
                title: {
                  text: '事故类别统计',
                  left: 'center'
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                toolbox: {
                  show: true,
                  feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    // magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                  }
                },
                legend: {
                  data: ['事故发生数量'],
                  left: 'center',
                  top: '30'
                },
                grid: {
                  left: '3%',
                  right: '8%',
                  bottom: '3%',
                  containLabel: true
                },
                xAxis: [
                  {
                    name: '事故类型',
                    type: 'category',
                    data: ['人员伤亡事故','火灾爆炸事故','危化品泄漏事故','设备事故','工艺事故']
                  }
                ],
                yAxis: [
                  {
                    name: '事故发生数量',
                    type: 'value',
                    // max: function(value) {
                    //     return value.max + 0.5;
                    // }
                  }
                ],
                series: series
            }
            that.initChart()
      })  
    },
    search1() {
      let query1 = {
        ...this.listQuery,
        ...this.query
      };
      request({
        url: `/api/System/qyaqscSgbgxx/Actions/djsl`,
            method: 'get',
            data: query1
        }).then(res => {
            let datas = res.data;
            let that = this;
            let tbzd = 0;
            let zd = 0;
            let jd = 0;
            let yb = 0;
            if(datas.length > 0){
              for(let i=0;i<datas.length;i++){
                if(datas[i].sgdj == '0'){
                  tbzd = datas[i].sgdjnum;
                }else if(datas[i].sgdj == '1'){
                  zd = datas[i].sgdjnum;
                }else if(datas[i].sgdj == '2'){
                  jd = datas[i].sgdjnum;
                }else if(datas[i].sgdj == '3'){
                  yb = datas[i].sgdjnum;
                }
              }
            }
            let seriesData = [
                {value: tbzd, name: '特别重大'},
                {value: zd, name: '重大'},
                {value: jd, name: '较大'},
                {value: yb, name: '一般'}
            ]
            that.option1 = {
                title: {
                    text: '事故等级统计',
                    // subtext: '虚构数据',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    bottom: 10,
                    left: 'center',
                    data: ['特别重大', '重大', '较大', '一般']
                },
                series: [
                    {
                        type: 'pie',
                        radius: '65%',
                        center: ['50%', '50%'],
                        selectedMode: 'single',
                        data: seriesData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            that.initChart()
      })  
    },
    reset() {
      for (let key in this.query) {
          this.query[key] = undefined
      }
      this.listQuery = {
          currentPage: 1,
          pageSize: 20,
          sort: "desc",
          sidx: "",
      }
      this.searchAll()
    }
  }
}
</script>
<style lang="scss">
    .conDiv{
        width: 50%;
        height: 100%;
        float:left;
    }
</style>
